<template>
  <div class="_wz_safetyCertificateList">
    <Spin size="large" fix v-if="tableLoading"></Spin>
    <div style="width: 100%;height: 100%;display: flex; align-items: center;color: #515a6e;font-size: 12px;" v-if="tableData.length < 1">
      <div style="margin:auto;">暂无数据</div>
    </div>
    <template v-for="item,index in tableData">
      <div class="_wz_safetyCertificateList_cent" :class="{_wz_safetyCertificateList_cent_select : active.uuid == item.uuid}" @click="selectData(item)" :key="item.id">
        <div class="_wz_safetyCertificateList_cent_div">
          <div :class="item.certificateState == 1?'_wz_type_color_39a4ff':'_wz_type_color_ff1f2e'" :data-sub="item.certificateState == 1?'已生效':'已逾期'" style="position: absolute;width: 85px;height: 85px;overflow: hidden;top: 0px;left: 0px;"></div>
          <div class="_wz_safetyCertificateList_cent_top">
            <div class="_wz_safetyCertificateList_cent_top_left">
              <img :src="!!item.certificateImg?apiUrl.imgUrl+item.certificateImg:'../../static/img/zwtpxd.png'" @error="public.imgDispose" />
            </div>
            <div class="_wz_safetyCertificateList_cent_top_right">
              <div class="_wz_safetyCertificateList_cent_top_right_div">{{ !!item.name ? item.name : '--' }}</div>
              <div class="_wz_safetyCertificateList_cent_top_right_div">
                {{ !!item.identifyNum ? item.identifyNum : '--' }}
              </div>
              <div class="_wz_safetyCertificateList_cent_top_right_div">
                {{ !!item.certificateNo ? item.certificateNo : '--' }}
              </div>
              <div class="_wz_safetyCertificateList_cent_top_right_div">
                {{ !!item.certificateType ? item.certificateType : '--' }}
              </div>
              <div class="_wz_safetyCertificateList_cent_top_right_div">
                发证日期：{{ !!item.certificateReleaseDate ? item.certificateReleaseDate : '--' }}
              </div>
              <div class="_wz_safetyCertificateList_cent_top_right_div">
                截至日期：{{ !!item.certificateDueDate ? item.certificateDueDate : '--' }}
              </div>
            </div>
          </div>
          <div class="_wz_safetyCertificateList_cent_bottom">
            <div>颁发机构：{{ !!item.certificateIssueName ? item.certificateIssueName : '--' }}</div>
            <div>运输企业：{{ !!item.deptName ? item.deptName : '--' }}</div>
          </div>
        </div>

      </div>
    </template>
  </div>
</template>
<script>
export default {
  props: ["tableData", "tableLoading"],
  data() {
    return {
      active: {},
    }
  },
  beforeCreate() {//beforeCreate创建前状态

  },
  created() {//created创建完毕状态

  },
  beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程

  },
  mounted() {//mounted 挂载结束状态

  },
  methods: {//执行的方法
    selectData(data) {
      this.$emit("getSelectData", data)//菜单点击数据传输 现在地址上页面
      this.active = data;
    },
    //查看详情
    vehicleDetailsFun(data) {
      this.$emit("vehicleDetailsFun", data)//菜单点击数据传输 现在地址上页面
    },
    //人员绑定
    personnelBinding(data) {
      this.$emit("personnelBinding", data)//菜单点击数据传输 现在地址上页面
    },
    //挂车绑定
    hangBindingFun(data) {
      this.$emit("hangBindingFun", data)//菜单点击数据传输 现在地址上页面
    },
    //
    vehicleListFun(name) {
      let that = this;
      if (name == 'personnelBinding') { //人员绑定
        that.personnelBinding(that.active);
      } else if (name == 'trailerBinding') { //挂车绑定
        that.hangBindingFun(that.active);
      } else if (name == 'vehicleDetails') { //车辆详情
        that.vehicleDetailsFun(that.active);
      }
    },
    //获取最后位置和时间
    accessLocate(data) {
      var that = this;
      //运输企业
      that.axios.post(that.apiUrl.webApi + "/position/position", {carPlateNo: data.carPlateNo}).then(res => {
        if (!!res) {
          that.$set(data, 'position', '');
          data.position = res.data.data;
        }
      }).catch(err => {
        console.log("失败", err)
      })
    }
  },
  watch: {//监听
    tableData(news, old) {
      this.active = {};
    }
  },
  beforeUpdate() {//beforeUpdate 更新前状态

  },
  updated() {//updated 更新完成状态

  },
  beforeDestroy() {//beforeDestroy 销毁前状态

  },
  destroyed() {//destroyed 销毁完成状态

  }
}
</script>
<style lang="less">
._wz_safetyCertificateList {
  width: 100%;
  height: 100%;
  overflow: auto;
  padding: 0 0 20px 0;

  ._wz_safetyCertificateList_cent {
    box-shadow: 0 1px 4px #d8d8d8;
    color: #666;
    float: left;
    border: 1px solid #fff;
    border-top: 2px solid #dcdee2;
    margin: 20px 0px 0px 20px;
    cursor: pointer;
    width: 350px;
    height: 260px;

    ._wz_type_color_39a4ff:before {
      content: "";
      display: block;
      width: 120px;
      height: 120px;
      border-style: solid;
      border-color: transparent #39a4ff transparent transparent;
      border-width: 30px;
      position: absolute;
      top: -60px;
      left: -60px;
      -webkit-transform: rotate(45deg);
      transform: rotate(45deg);
      z-index: 1;
    }

    ._wz_type_color_ff1f2e:before {
      content: "";
      display: block;
      width: 120px;
      height: 120px;
      border-style: solid;
      border-color: transparent #ff1f2e transparent transparent;
      border-width: 30px;
      position: absolute;
      top: -60px;
      left: -60px;
      -webkit-transform: rotate(45deg);
      transform: rotate(45deg);
      z-index: 1;
    }

    ._wz_type_color_39a4ff:after {
      content: attr(data-sub);
      position: absolute;
      top: 23px;
      left: 13px;
      z-index: 2;
      color: #fff;
      -webkit-transform: rotate(315deg);
      transform: rotate(315deg);
      font-size: 12px;
    }

    ._wz_type_color_ff1f2e:after {
      content: attr(data-sub);
      position: absolute;
      top: 23px;
      left: 13px;
      z-index: 2;
      color: #fff;
      -webkit-transform: rotate(315deg);
      transform: rotate(315deg);
      font-size: 12px;
    }

    ._wz_safetyCertificateList_cent_div {
      padding: 10px;
      position: relative;

      ._wz_safetyCertificateList_cent_top {
        ._wz_safetyCertificateList_cent_top_left {
          float: left;
          height: 170px;
          width: 120px;

          img {
            width: 100%;
            height: 100%;
          }
        }

        ._wz_safetyCertificateList_cent_top_right {
          padding: 0 0 0 10px;
          width: calc(100% - 120px);
          float: left;

          ._wz_safetyCertificateList_cent_top_right_div {
            height: 30px;
            line-height: 30px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            width: 100%;
          }

        }
      }

      ._wz_safetyCertificateList_cent_bottom {
        clear: both;
        div {
          line-height: 30px;
          height: 30px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
  }

  ._wz_safetyCertificateList_cent_select {
    border: 1px solid #d8d8d8;
    border-top: 2px solid #2d8cf0;
    background: #f2f2f2;
  }
}


</style>
